<template>
    <div class="app-container">
        <div class="condition-selection">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="所属校区" prop="campusId">
                    <el-select clearable v-model="queryParams.campusId" placeholder="选择校区" @change="campusChange">
                        <el-option v-for="item in campusList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属园区" prop="parkId">
                    <el-select clearable v-model="queryParams.parkId" placeholder="选择园区" @change="changeCasc">
                        <el-option v-for="(item, index) in parkList" :key="index" :label="item.parkName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="宿舍楼" prop="name">
                    <el-select clearable v-model="queryParams.buildingName" placeholder="选择宿舍楼">
                        <el-option v-for="(item, index) in buildingList" :key="index" :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="住宿性别" prop="gender">
                    <el-select clearable v-model="queryParams.gender" placeholder="选择性别">
                        <el-option v-for="(item, index) in ['男', '女']" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="loading" :data="remainingDormitories">
            <el-table-column label="校区" align="center" prop="campusName" />
            <el-table-column label="园区" align="center" prop="parkName" />
            <el-table-column label="宿舍楼" align="center" prop="buildingName" />
            <el-table-column label="住宿性别" align="center" prop="gender" />
            <el-table-column label="宿舍号" align="center" prop="roomNo" />
            <el-table-column label="分配辅导员" align="center" width="400">
                <template slot-scope="scope">
                    <div slot="reference">
                        <el-row>
                            <el-col :span="20">
                                <div v-for="item in scope.row.hasTeachers" :key="item.id">
                                    {{ item.teacherName }} ({{ item.bedCount }}人)
                                    <el-button v-if="item.isLock != '1'" size="mini" @click="lockDmsClass(item)"
                                        icon="el-icon-lock" type="text">锁定</el-button>
                                    <el-button v-if="item.isLock == '1'" :disabled="item.isLock == '1'" size="mini"
                                        icon="el-icon-lock" type="text">已锁定</el-button>
                                </div>
                            </el-col>
                            <el-col :span="4"> 
                                <el-button size="mini" v-if="scope.row.hasTeachers==null?false:scope.row.hasTeachers.length > 0"
                                    @click="changeBedCount(scope.row)">调整</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="可用床位数量" align="center" prop="bedCount" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="classDm(scope.row)">分配辅导员</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getBuildingDormitory" />

        <el-dialog title="将宿舍分配给班级" :visible.sync="classV">
            <el-form label-width="120px">
                <el-form-item label="可用床位">
                    <el-input readonly v-model="class_dis.bed_count"></el-input>
                </el-form-item>
                <el-form-item label="辅导员">
                    <!-- <el-select :disabled="hasClass" style="width: 90%;" v-model="class_form.classCode" filterable multiple
                        placeholder="请选择班级">
                        <el-option v-for="(v, i) in class_list" :key="i" :label="v.className"
                            :value="v.classCode"></el-option>
                    </el-select> -->
                    <el-select :disabled="hasClass" style="width: 90%;" v-model="class_form.tNo" filterable multiple placeholder="请选择辅导员">
                        <el-option v-for="item in TeacherNameList" :key="item.tno" :label="item.tno + '--' + item.name" :value="item.tno">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="doTeacherDom">分配</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="调整床位数量" :visible.sync="changeBedV">
            <el-form label-width="120px">
                <el-form-item label="可用床位数">
                    <el-input v-model="changeBedDisForm.canBed" readonly></el-input>
                </el-form-item>

                <el-form-item :label="v.teacherName" label-width="240px" v-for="(v, i) in changeBedDisForm.hasTeachers"
                    :key="i">
                    <el-input :disabled="v.isLock == '1'" v-model="v.bedCount" type="number"></el-input>
                </el-form-item>

                <el-form-item label="" label-width="120px">
                    <el-button @click="saveChangeBed">保存</el-button>
                </el-form-item> 
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getMajorNumber, selectXwClass, selectXwDom, xwDomClass, changeClassBed,lockDmsClass  } from '@/api/dormitory/dormitory-assignment/school-number'
import { listCampus } from "@/api/dormitory/campus";
import { listBuilding } from "@/api/dormitory/basedata/building";
import { listPark } from "@/api/dormitory/basedata/park";
import { listTeacherName } from "@/api/stuCQS/basedata/teacher";

import { fullLoading } from "@/api/helpFunc";
import lodash from "lodash";

export default {
    name: 'SRSUiBuildingNumberView',

    data() {
        return {
            // 专业人数列表
            majorGenderList: [],
            // 请求参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            // 校区列表
            campusList: [],
            // 宿舍楼列表
            buildingList: [],
            // 园区列表
            parkList: [],
            // 剩余宿舍列表
            remainingDormitories: [],
            // 加载
            loading: false,
            total: 0,

            classV: false,
            class_list: [],
            class_form: {
                tNo: [],
                dormitoryId: []
            },
            class_dis: {
                bed_count: 0
            },

            changeBedV: false,
            changeBedDisForm: {
                canBed: 0,
                classes: []
            },

            hasClass:false,
            TeacherNameList:[],
        };
    },

    mounted() {
        this.selectXwClass();
        this.getMajorGenderNumber();
        this.getCampusList();
        this.getBuildingList();
        this.getParkList();
        this.getBuildingDormitory();
        this.getTeacherNameList();
    },

    methods: {
        async lockDmsClass(val) {
            let loading = fullLoading(this);
            let res = await lockDmsClass(val.id);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.getBuildingDormitory();
            }
        },

        getTeacherNameList() {//获取辅导员名称列表
            listTeacherName().then(res => {
                console.log(res)
                this.TeacherNameList = res.data
            })
        },

        async saveChangeBed() {
            let sdata = [...this.changeBedDisForm.hasTeachers];
            let can = this.changeBedDisForm.canBed;
            let tempTotal = 0;
            let isZero = false;
            sdata.map(x => {
                x.bedCount = parseInt(x.bedCount);
                if (x.bedCount == 0) {
                    this.$message.info("不能为0");
                    isZero = true;
                }
                tempTotal += x.bedCount;
            });
            if (isZero) {
                return;
            }
            if (tempTotal > can) {
                this.$message.info("分配的床位数量大于可用床位数量");
                return;
            } 
            let loading = fullLoading(this);
            console.log(sdata);
            let res = await changeClassBed(sdata)
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.changeBedV = false;
                this.getBuildingDormitory();
            }
        },
        changeBedCount(row) {
            this.changeBedDisForm.canBed = row.bedCount;
            this.changeBedDisForm.hasTeachers = lodash.cloneDeep(row.hasTeachers);
            this.changeBedV = true; 
            //console.log(this.changeBedDisForm.hasTeachers);
        },
        // async doClassDom() {
        //     console.log(this.tempForm);

        //     let sdata = { ...this.class_form };
        //     if (sdata.classCode.length == 0) {
        //         this.$message.info("请选择辅导员");
        //         return;
        //     }
        //     let res = await xwDomClass(sdata);
        //     if (res.code == 200) {
        //         this.getBuildingDormitory();
        //         this.classV = false;
        //     }
        // },
        async doTeacherDom() {  
            let sdata = { ...this.class_form }; 
            let res = await xwDomClass(sdata);
            if (res.code == 200) {
                this.getBuildingDormitory();
                this.classV = false;
            }
        },

        async selectXwClass() {
            let res = await selectXwClass();
            if (res.code == 200) {
                this.class_list = [...res.data];
            }
        },

        classDm(param) {
            this.hasClass = false;
            let tNos = [];
            if(param.hasTeachers!=null){
                          param.hasTeachers.map(x => {
                tNos.push(x.tNo);
                if(x.isLock == "1"){
                    this.hasClass = true;
                }
            });    
            }

            this.class_form.tNo = [...tNos]; 
            this.class_dis.bed_count = param.bedCount;
            this.class_form.dormitoryId = [param.dormitoryId];
            this.classV = true;
        },

        // 获取专业人数
        getMajorGenderNumber() {
            getMajorNumber(this.$route.query.collegeId).then(res => {
                this.majorGenderList = res.rows
            })
        },

        // 获取宿舍楼剩余宿舍
        getBuildingDormitory() {
            this.loading = true
            selectXwDom(this.queryParams).then(res => {
                this.remainingDormitories = res.rows
                this.total = res.total
                this.loading = false
            })
        },
        // 获取宿舍楼数据
        getBuildingList() {
            listBuilding({ pageSize: 50, parkId: this.queryParams.parkId }).then(res => {
                this.buildingList = res.rows
            })
        },
        // 获取园区列表
        getParkList() {
            listPark(this.queryParams).then(res => {
                this.parkList = res.rows
            })
        },
        // 重置
        resetQuery() {
            this.queryParams = {};
        },
        // 搜索
        handleQuery() {
            this.getBuildingDormitory()
        },
        // 获取校区列表
        getCampusList() {
            listCampus().then(response => {
                this.campusList = response.rows
            })
        },
        // 选择园区
        changeCasc(value) {
            this.queryParams.parkId = value
            this.getBuildingList()
        },
        // 校区选择改变
        campusChange(value) {
            this.queryParams.campusId = value
            this.getParkList()
        }
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;

    .top {
        display: flex;
        flex-wrap: wrap;

        .box-card {
            width: 180px;
            margin-right: 20px;
            height: 160px;
        }
    }

    .condition-selection {
        margin-top: 20px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .remaining-building {
        .box-card {
            width: 280px;
            margin: 10px 10px 10px 0;
        }
    }

}
</style>
